<html>

<head>
	<link rel="stylesheet" href="main.css" type="text/css" media="all"/> 
	<title>JIPDA</title>
	<script type="text/javascript" src="../jipda/lib/esprima.js"></script>
	<script type="text/javascript" src="../jipda/common.js"></script>
	<script type="text/javascript" src="../jipda/lattice/lattice.js"></script>
	<script type="text/javascript" src="../jipda/lattice/topLattice.js"></script>
	<script type="text/javascript" src="../jipda/lattice/setLattice.js"></script>
	<script type="text/javascript" src="../jipda/lattice/tajsLattice.js"></script>
	<script type="text/javascript" src="../jipda/address.js"></script>
	<script type="text/javascript" src="../jipda/state.js"></script>
	<script type="text/javascript" src="../jipda/ast.js"></script>
	<script type="text/javascript" src="../jipda/jipda.js"></script>
	<script type="text/javascript" src="../jipda/dep.js"></script>
	<script type="text/javascript" src="../jipda/transform.js"></script>
	<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="lib/d3.v2.min.js"></script>
	<script type="text/javascript" src="lib/ace/ace.js"></script>
	<script type="text/javascript" src="graph.js"></script>
	<script type="text/javascript">

		// define print method for JIPDA
    var print = function () { console.log(Array.prototype.slice.call(arguments).join(" ")) }		
		var editor;
		
		function DepGraphState()
		{
		  this.g = new D3ForceGraph("#depGraph", ["read", "write"]);
		}
		DepGraphState.prototype = new State();
		
		DepGraphState.prototype.join =
		  function (state)
		  {
		  	return this;
		  }
		
		DepGraphState.prototype.readsAddress =
	    function (address, value, stack)
	    {
	      stackApplications(stack).forEach(
	        function (application) 
	        {
			    	console.log("read", address, application);
	  	    	var source = this.g.registerNode(address, function () {address.type = "address"; return address;});
	  	    	var target = this.g.registerNode(application);
	  	    	this.g.addLink({source: source, target: target, type:"read"});
	  	    	this.g.update();	        
	        }, this);
	      return this;
	    }
	    
	  DepGraphState.prototype.writesAdress =
	    function (address, value, stack)
	    {
	      stackApplications(stack).forEach(
	        function (application) 
	        {
			    	console.log("write", application, address);
	  	    	var source = this.g.registerNode(application);
	  	    	var target = this.g.registerNode(address, function () {address.type = "address"; return address;});
	  	    	this.g.addLink({source: source, target: target, type:"write"});
	  	    	this.g.update();
	        }, this);
	      return this;
	    }  
		
		function doIt()
		{
			$("#depGraph").empty();
			$("#resultValue").empty();
		  var source = editor.getSession().getValue();
			var ast = createAst(source);
			var lat = new LatN(1);
			var resultState = new ResultState();
			var depGraphState = new DepGraphState(); 
			var productState = new ProductState([resultState, depGraphState]);
			var ipda = ipdaEval(ast, productState, {lattice: lat, k:1, ag: timeDefaultAg});
			$("#resultValue").text(resultState.result);
		}
			
		$(function ()
		{
		  editor = ace.edit("editor");
		  editor.getSession().setMode("ace/mode/javascript");
		})
		
	</script>
</head>

<body>
	<div id="editor" style="width: 480px; height: 460px;"></div>
	<div id="manip" style="position: absolute; top:470px;">
		<button id="eval" name="eval" onClick="doIt()">Eval</button>
		<span id="resultValue"></span>
	</div>
	<div id="depGraph" style="position:absolute; left:400px; width:400px; height:480px;"/>
</body>

</html>
</html>
</html>